<template>
  <div class="select-group-container" :style="cssStyle">
    <slot name="select" />
    <slot name="append" />
  </div>
</template>

<script>
export default {
    name: 'SelectGroup',
    components: {

    },
    props: {
        cssStyle: { type: String, default: '' }
    },
    data() {
        return {

        }
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    beforeDestroy() {

    },
    mounted() {

    },
    methods: {

    }
}
</script>

<style scoped lang="scss">
.select-group-container{
    line-height: normal;
    display: inline-table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
/deep/ .el-select{
    width:100%;
    display: table-cell;
    line-height:36px;
    position: relative;
    white-space: nowrap;
    vertical-align:middle;
}
/deep/ .el-input__inner{
    line-height: 36px;
    height:36px;
    margin-right: 0px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    display:block;
}
.el-button{
    line-height:36px;
    height:36px;
    padding:0 12px;
    display: table-cell;
    vertical-align:middle;
    border-left:none;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.el-button:hover, .el-button:focus{
    border-color: #DCDFE6;
}
</style>
